<!--
 * @Descripttion: 
 * @Author: Kevin
 * @Date: 2022-06-13 16:22:13
 * @LastEditors: Tommy Chen
 * @LastEditTime: 2024-08-29
-->
<template>
  <RjModal
    width="800px"
    drag
    :title="$t('userManage.bindMACModalTitle')"
    :visible="isVisible"
    :footer="null"
    @cancel="$emit('set', false)"
  >
    <div class="flex unbind-btn row-center mb-15" @click="unbindMac(null)">
      <img :src="unbindIcon" width="13" />
      <span class="ml-5">{{ $t('userManage.unbind') }}</span>
    </div>
    <RjTable
      :columns="columns"
      :dataSource="data"
      rowKey="recordUuid"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :loading="loading"
    >
      <template v-slot:action="row">
        <img
          :src="unbindIcon"
          @click="unbindMac(row)"
          style="cursor: pointer"
          width="18"
          alt=""
        />
      </template>
    </RjTable>
  </RjModal>
</template>

<script>
import { mapState } from 'vuex';
import RjTable from '@/components/rj-table';
import { requestHttp, maccApi } from '@utils/index';
import unbindIcon from '@/assets/images/configuration/unbind.png';
import moment from 'moment-timezone';
import authSysMixin from '@project/authSys/mixin/authSysMixin';

export default {
  name: 'voucherMacModal',
  mixins: [authSysMixin],
  components: {
    RjTable,
  },
  data() {
    const columns = [
      {
        title: 'MAC',
        key: 'mac',
        align: 'center',
        dataIndex: 'mac',
      },
      {
        title: this.$t('userManage.bindTime'),
        key: 'bindAt',
        dataIndex: 'bindAt',
        align: 'center',
      },
      {
        title: this.$t('userManage.action'),
        key: 'action',
        align: 'center',
        scopedSlots: { customRender: 'action' },
      },
    ];
    return {
      columns,
      data: [],
      selectedRowKeys: [],
      selectedRows: [],
      loading: false,
      unbindIcon,
      uuid: '',
      isVisible: false,
    };
  },
  computed: {
    ...mapState('Group', ['groupId', 'groupInfo']),
    ...mapState('User', ['tenantInfo', 'userInfo']),
  },
  methods: {
    openModal(uuid) {
      this.isVisible = true;
      this.uuid = uuid;
      this.queryData();
    },
    // 表格复选框勾选事件
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    async queryData() {
      let querys = {
        tenantId: this.tenantInfo.tenantId,
        ishttps: false,
      };
      let replaces = {
        uuid: this.uuid,
        groupId: this.groupId,
        tenantName: encodeURI(this.tenantInfo.tenantName),
      };
      this.loading = true;
      const res = await this.requestHttpAuth({
        api: `${maccApi.USER_MANAGE_VOUCHER_GET_BIND_MAC_LIST}`,
        method: 'GET',
        querys,
        replaces,
      });
      this.loading = false;
      if (!res.code) {
        this.data = (res?.voucherData?.list || []).map((item) =>
          Object.assign(item, {
            bindAt: moment(item.bindTime)
              .tz(this.groupInfo.timezone)
              .format('YYYY-MM-DD HH:mm:ss'),
          })
        );
      }
    },
    unbindMac(row) {
      if (!row && !this.selectedRowKeys.length) {
        this.$message.warning(this.$t('userManage.selectOneVoucher'));
        return;
      }
      this.$confirm({
        title: this.$t('userManage.message'),
        content: 'Are you sure to unbind ?',
        onOk: async () => {
          let replaces = {
            uuid: this.uuid,
          };
          let params = {
            recordList: row ? [row.recordUuid] : this.selectedRowKeys,
            tenantId: this.tenantInfo.tenantId,
            macList: row
              ? [row.mac]
              : this.selectedRows.map((item) => item.mac),
          };
          let querys = {
            group_id: this.groupInfo.groupId,
          };
          const res = await requestHttp({
            api: `${maccApi.USER_MANAGE_VOUCHER_UNBIND_MAC}`,
            method: 'POST',
            replaces,
            params,
            querys,
          });
          if (!res.code) {
            if (!res?.voucherData?.code) {
              this.$message.success(this.$t('userManage.success'));
              this.queryData();
            } else {
              this.$message.error(res.voucherData.msg);
            }
          } else {
            this.$message.error(res.msg);
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.unbind-btn {
  width: 81px;
  height: 25px;
  border: 1px solid #2b6afd;
  border-radius: 3px;
  color: #2b6afd;
  cursor: pointer;
}
.flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}
.row-center {
  justify-content: center !important;
}
.mb-15 {
  margin-bottom: 15px;
}
.ml-5 {
  margin-left: 5px;
}
</style>
